<template>
  <div>
    <el-card shadow="never">
      <el-form ref="carForm" :model="pageData">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车型编号：" label-width="100px" prop="id">
              <el-input v-model="pageData.id" placeholder="请输入车型编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载重量：" label-width="100px">
              <el-select v-model="pageData.allowableLoad" placeholder="请输入应载重量">
                <el-option v-for="item in allowableLoadOptions" :key="item.value" :label="item.label" :value="item.value"  />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载体积：" label-width="100px">
              <el-select v-model="pageData.allowableVolume" placeholder="请输入应载体积">
                <el-option v-for="item in allowableVolumeOptions" :key="item.value" :label="item.label" :value="item.value"  />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆类型：" prop="name" label-width="100px" style="margin-bottom: 0">
              <el-input v-model="pageData.name" placeholder="请输入车辆类型"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" @click="getTable">搜索</el-button>
            <el-button size="small" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 20px;">
      <el-button  type="primary" @click="showDialogForm=true">新增车型</el-button>
      <el-table :data="tableData" :stripe="true" style="width: 100%;border: 1px solid #eee;margin-top: 20px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="id" label="车型编号" width="180"></el-table-column>
        <el-table-column prop="name" label="车辆类型" width="120"></el-table-column>
        <el-table-column prop="num" label="车型数量" width="120"></el-table-column>
        <el-table-column prop="allowableLoad" label="应载重量（吨）" width="180"></el-table-column>
        <el-table-column prop="allowableVolume" width="180" label="应载体积（立方米）"></el-table-column>
        <el-table-column prop="measureLong" label="长（米）"></el-table-column>
        <el-table-column prop="measureWidth" label="宽（米）"></el-table-column>
        <el-table-column prop="measureHigh" label="高（米）"></el-table-column>
        <el-table-column label="操作" fixed="right" width="140">
          <template #default="{row}">
<!--                        {{row}}-->
            <el-row>
              <el-button
                type="text"
                icon="el-icon-edit"
                size="mini"
                style="color: #62A7F1"
                @click="edit(row.id)"
              >编辑
              </el-button>
              <span style="color: #eee;margin:0 10px">|</span>
              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                @click="del(row.id)"
              >删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 20px;">
      </el-pagination>
    </el-card>
<!--      弹窗-->
    <el-dialog :title="showTitle" :visible.sync="showDialogForm" @close="btnClose">
      <el-form ref="dialogForm" :model="dialogForm" :rules="dialogRules">
        <el-form-item label="车辆类型:" prop="name" label-width="100px">
          <el-input v-model="dialogForm.name" placeholder="请输入车辆类型"></el-input>
        </el-form-item>
        <el-form-item label="应载重量:" prop="allowableLoad" label-width="100px">
          <el-input v-model="dialogForm.allowableLoad" placeholder="请输入车型载重"></el-input>
        </el-form-item>
        <el-form-item label="应载体积:" prop="allowableVolume" label-width="100px">
          <el-input type="number" v-model.number="dialogForm.allowableVolume" placeholder="请输入车型体积"></el-input>
        </el-form-item>
        <el-form-item label="长:" prop="measureLong" label-width="100px">
          <el-input v-model="dialogForm.measureLong">
            <i slot="suffix">米</i>
          </el-input>
        </el-form-item>
        <el-form-item label="宽:" prop="measureWidth" label-width="100px">
          <el-input v-model="dialogForm.measureWidth">
            <i slot="suffix">米</i>
          </el-input>
        </el-form-item>
        <el-form-item label="高:" prop="measureHigh" label-width="100px">
          <el-input v-model="dialogForm.measureHigh">
            <i slot="suffix">米</i>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="btnOK">确 定</el-button>
        <el-button @click="btnClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addCarsimple, editCarsimple, getCarsimple, getCarsimpleInfo } from '@/api/truckType'

export default {
  name: 'car-models',
  data () {
    const validateValue = (rule, value, callback) => {
      const num = parseInt(value)
      if (num > 100 || num < 1) {
        callback(new Error('只可输入1-100之间的整数'))
      } else {
        callback()
      }
    }
    return {
      tableData: [],
      total: 0,
      pageData: {
        page: 1,
        pageSize: 10,
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: ''
      },
      allowableLoadOptions: [
        { label: '<1.8（吨）', value: 'RANGE_LEVEL_1' },
        { label: '1.8-6（吨）', value: 'RANGE_LEVEL_2' },
        { label: '6-14（吨）', value: 'RANGE_LEVEL_3' },
        { label: '14-30（吨）', value: 'RANGE_LEVEL_4' },
        { label: '30-50（吨）', value: 'RANGE_LEVEL_5' },
        { label: '50-100（吨）', value: 'RANGE_LEVEL_6' },
        { label: '100>（吨）', value: 'RANGE_LEVEL_7' }
      ],
      allowableVolumeOptions: [
        { label: '<3（㎡）', value: 'RANGE_LEVEL_1' },
        { label: '3-5（㎡）', value: 'RANGE_LEVEL_2' },
        { label: '5-10（㎡））', value: 'RANGE_LEVEL_3' },
        { label: '10-15（㎡）', value: 'RANGE_LEVEL_4' },
        { label: '15-30（㎡）', value: 'RANGE_LEVEL_5' },
        { label: '30-50（㎡）', value: 'RANGE_LEVEL_6' },
        { label: '50-80（㎡）', value: 'RANGE_LEVEL_7' },
        { label: '80-150（㎡）', value: 'RANGE_LEVEL_8' },
        { label: '>150（㎡）', value: 'RANGE_LEVEL_9' }
      ],
      showDialogForm: false,
      dialogForm: {
        name: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      },
      dialogRules: {
        name: [
          { required: true, trigger: 'blur', message: '车型名称不能为空' }
        ],
        allowableLoad: [
          { required: true, trigger: 'blur', message: '应载重量不能为空' },
          { required: true, validator: validateValue, trigger: 'blur' }
          // { min: 1, max: 100, message: '只可输入1-100之间的整数', trigger: 'blur' }

        ],
        allowableVolume: [
          { required: true, trigger: 'blur', message: '应载体积不能为空' },
          { required: true, validator: validateValue, trigger: 'blur' }
          // { min: 1, max: 100, message: '只可输入1-100之间的整数', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getTable()
  },
  methods: {
    // 删除车型
    del (id) {
      this.$confirm('此操作将永久删除该车型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message.error('很抱歉，演示系统，不允许修改!')
          this.getTable()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async getTable () {
      const { data } = await getCarsimple(this.pageData)
      // console.log(data)
      this.total = +data.counts
      // 反转数组
      this.tableData = data.items
      // this.$refs.carForm.resetField()
    },
    handleSizeChange (pageSize) {
      this.pageData.pageSize = pageSize
      this.getTable()
    },
    handleCurrentChange (currentPage) {
      this.pageData.page = currentPage
      this.getTable()
    },
    reset () {
      this.$refs.carForm.resetFields()
    },
    async edit (id) {
      const { data } = await getCarsimpleInfo(id)
      this.dialogForm = data
      this.showDialogForm = true
    },
    async btnOK () {
      await this.$refs.dialogForm.validate()
      if (!this.dialogForm.id) {
        await addCarsimple(this.dialogForm)
        this.$message.success('成功新增车型')
      } else {
        await editCarsimple(this.dialogForm)
        this.$message.success('成功修改车型')
      }
      this.showDialogForm = false
      this.getTable()
    },
    btnClose () {
      this.$refs.dialogForm.resetFields()
      this.showDialogForm = false
    }
  },
  computed: {
    showTitle () {
      return this.dialogForm.id ? '编辑车型' : '新增车型'
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  padding-right: 50px;

  .el-button {
    padding: 10px 30px 10px 30px
  }
}
.el-dialog{
  width: 600px;
  .el-form{
  padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .el-form-item{
    ::v-deep .el-input__inner {
      width: 380px;
    }
    }
  }
  .dialog-footer{
    margin: 0 auto;
  }
}
</style>
